<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="canvas" width="400" height="300">换浏览器吧(づ￣3￣)づ╭❤～</canvas>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

HTML5 Canvas;
  1. 获取绘图上下文
    var ctx = canvas.getContext("2d|3d");
    基础矩形
      ctx.strokeRect(100,100,300,300);
      ctx.fillRect(120,120,260,260);
      ctx.clearRect(140,140,220,220);

  2. 有关配置的方法
    ctx.scale(xscale,yscale); 缩放比
    ctx.translate(x,y); 变换画布的原点
    ctx.save() 保存当前的画布状态
    ctx.restore() 获取上一个保存的画布状态

    颜色：
      - strokeStyle: 声明线条颜色
      - fillStyle: 填充颜色
      - globalAlpha: 透明通道
    渐变：
      - createLinearGradient(x1,y1,x2,y2)
      - createRadialGradient(x1,y1,x2,y2,r2) 放射渐变
      - addColorStop(postion,color) 制定渐变的颜色值
                     0 ~ 1
  3.创建路径
    beginPath() 开始新的形状描述
    closePath() 关闭路径 会自动和原点相连接

    绘制：
      moveTo(x,y): 将笔尖移动到指定位置
      lineTo(x,y): 指定移动的位置
      rect(x,y,w,h): 生成矩形
      arc(x,y,radius,startAngle,endAngle,direction) 在xy上生成弧线或圆形 angle 弧度 direction 表示方向

    stroke() 绘制轮廓形状
    fill() 填充
    clip() 设置裁剪区域

  4.线形属性
    ctx.lineWidth
    ctx.lineCap 线头(butt:平直,round:圆形,square:正方形)
    ctx.lineJoin 拐角(round,bevel,miter)
    ctx.miterLimit 设置拐角miter的锐角长度 小于10

  5.文本
    font: css font一样
    textAlign: 水平对齐方式
    textBaseLine: 垂直对齐方式

    方法：
      strokeText(text,x,y) 绘制文字轮廓
      fillText(text,x,y） 实心文字

  6.阴影
    ctx.shadowColor css一致
    ctx.shadowOffsetX 水平投射距离
    ctx.shadowOffsetY 垂直投射距离
    ctx.shadowBlur 模糊

  7.图像
    drawImage(image,x,y)
    drawImage(image,x,y,w,h) // PS:用scale更好
      createPattern(img,type) 平铺图像，no-repeat, repeat  // 可以作为fillstyle的返回值
    ctx.clip(); 切割 // 需要一个切割路径



</body>
</html>
